<template>
  <div class="common-layout">
    <Header/>
    <el-container id="container">
      <el-main>
        <el-radio-group v-model="commentSort" size="small" @change="changeCondition" style="float:right;margin:20px 0">
          <el-radio-button value="0">按评论时间排序</el-radio-button>
          <el-radio-button value="1">按打分排序</el-radio-button>
        </el-radio-group>
        <div id="commentTableDiv">
          <el-table
              id="commentTable"
              :data="commentTableData"
              border
              show-overflow-tooltip
              size="large"
              table-layout="fixed">
            <el-table-column prop="mcId" label="评论id" v-if="false"/>
            <el-table-column prop="uid" label="用户id" v-if="false"/>
            <el-table-column prop="mid" label="电影id" v-if="false"/>
            <el-table-column prop="mName" label="电影名称"/>
            <el-table-column prop="mPic" label="电影海报">
              <template v-slot="{ row }">
                <el-image :src="imgPrefix + row.mPic" fit="cover" style="max-height: 100px;max-width: 100px"/>
              </template>
            </el-table-column>
            <el-table-column prop="commentContent" label="评论内容"/>
            <el-table-column prop="commentAt" label="评论时间"/>
            <el-table-column prop="commentScore" label="打分值"/>
            <el-table-column prop="operation" label="操作">
              <template #default="scope">
                <el-button size="small" @click="deleteComment(scope.row)" type="danger" style="width: 70px">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer>
        <div id="commentPage">
          <el-pagination
              style="float:right"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :current-page="currentPage"
              :disabled="false"
              :total="totalCount"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              background layout="total, sizes, prev, pager, next, jumper"/>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script setup>
import {ElNotification, ElMessageBox} from "element-plus";
import request from "@/request.js";
import {request2} from "@/request.js";
import qs from 'qs'
import {ref, reactive, onMounted, onBeforeUnmount, inject} from "vue";
import {Lock, User, Cellphone, UserFilled, Search} from "@element-plus/icons-vue";
import SessionStorage from "@/SessionStorage.js";
import {useRoute, useRouter} from "vue-router";
import axios from "axios";
import moment from "moment";

const baseIp = import.meta.env.VITE_APP_API_URL;
const imgPrefix = inject('imgPrefix');

const loginUser = SessionStorage.getItem("loginUser");

const commentSort = ref('0')

const changeCondition = (val) => {
  console.log('评论排序的单选值发生了改变，当前选中的值为：', val);
  commentSort.value = val;
  queryDto2.orderByCondition = val;
  searchComments();
}
// 用于存储当前页的数据
const commentTableData = reactive([])

// 分页插件
const currentPage = ref(1);
const pageSize = ref(5);
const totalCount = ref(0);


const queryDto2 = reactive({
  uid: loginUser.uid,
  orderByCondition: commentSort.value,
  pageNo: currentPage.value,
  pageSize: pageSize.value
})
const searchComments = () => {
  request2({
    url: "/comment/list",
    method: "post",
    data: queryDto2
  }).then(res => {
    if ('200' === res.code && res.data != null) {
      console.log('查询所有评论成功！');
      const data = res.data;
      // 清空后端返回的影院demo数据
      commentTableData.splice(0, commentTableData.length);
      totalCount.value = data.totalCount;
      pageSize.value = data.pageSize;

      // 更新当前页数据
      commentTableData.push(...data.list);

    }
  })
}
searchComments();
const handleCurrentChange = async (newPage) => {
  console.log("pageNo修改为第" + newPage + "页！");
  currentPage.value = newPage;
  queryDto2.pageNo = newPage;
  searchComments();
};

// 处理每页显示数量改变的方法
const handleSizeChange = (newSize) => {
  console.log("pageSize修改为每页" + newSize + "条！");
  pageSize.value = newSize;
  currentPage.value = 1;
  queryDto2.pageSize = newSize;
  searchComments();
};

const deleteComment = async (row) => {
  // 弹出确认框
  const confirmResult = await ElMessageBox.confirm(
      '确定要删除吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  );
  if (confirmResult === 'confirm') {
    axios.post(
        baseIp + ":9091/comment/deleteComment?mcId=" + row.mcId,
        null,
        {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}}
    ).then(res => {
      console.log(res.data);
      if ('200' === res.data.code) {
        ElNotification.success(res.data.msg);
        window.location.reload();
      } else {
        ElNotification({
          type: 'error',
          message: res.data.msg
        })
      }
    })
  } else {
    console.log('用户取消删除');
  }

}
</script>
<style scoped>

</style>
